﻿<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>表单布局系统</title>
 
  <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <!--
  <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  -->
  <script src="api/jquery.min.js"></script>
  <script src="api/jquery-ui.min.js"></script>
 
	<link rel="stylesheet" type="text/css" href="easyui1.5/themes/bootstrap/easyui.css"/>
	<link rel="stylesheet" type="text/css" href="easyui1.5/themes/icon.css"/>
	<script src="easyui1.5/jquery.easyui.min.js"></script>
	<script src="easyui1.5/locale/easyui-lang-zh_CN.js"></script>
	
	<script src="myfiles/myui.js"></script>
	<link rel="stylesheet" href="myfiles/myui.css">

  
</head>

<body>

<div id="header">
<div style="margin-top:8px;font-size:20px;">表单布局系统</div>
	<!--<button id="submit" style="margin-top:10px;">保存提交</button>-->
</div>
<div class="clear_div"></div>


<div id="products">
  <h3 class="ui-widget-header">控件区</h3>
  <div id="catalog">
    <h3><a href="#">基本控件</a></h3>
    <div>
      <ul>
        <li class="ui-state-default">Textbox</li>
        <li class="ui-state-default">Passwordbox</li>
        <li class="ui-state-default">Select</li>
        <li class="ui-state-default">Date</li>
        <li class="ui-state-default">Datetime</li>
        <li class="ui-state-default">Button</li>
		<!--
        <li class="ui-state-default">NULL</li>
		-->
      </ul>
    </div>
    <h3><a href="#">布局</a></h3>
    <div>
      <ul>
        <li class="ui-state-default">Tab</li>
        <li class="ui-state-default">Group</li>
        <li class="ui-state-default">Datagrid</li>
      </ul>
    </div>
    
  </div>
</div>



<div id="properties">
  <h3 class="ui-widget-header">属性区</h3>
  <div id="properties_group">
    <h3><a href="#">控件属性</a></h3>
    <div style="font-size:14px;">
		<p>名称：<input id="contorller_columnNameShow" class="easyui-textbox" size="15" /></p>
		<p>字段：<input id="contorller_columnName" class="easyui-textbox" size="15" /></p>
		
		<p>
			<select id="contorller_dataoptions" class="easyui-combobox" label="属性选择器data-options:" labelPosition="top"
				data-options="{multiple:true,multiline:true,width:200,height:100}" style="width:200px;">
				<option selected></option>
				<option>"height":40</option>
				<option>"width":300</option>
				<option>"required":true</option>
				<option>"multiline":true</option>
			</select>
		</p>
		
		<p>div-style:</p>
		<p><input id="contorller_div_style" class="easyui-textbox" size="15" data-options="multiline:true,editable:false" style="width:200px;height:50px"
			value=''/></p>
		
		<p></p>
		<p>
		<button id="applyCSSBtn" >应用效果</button>
		<button id="deleteUI" >删除选中控件</button>
		</p>
    </div>
	
    <h3><a href="#">布局窗口宽高</a></h3>
    <div>
		<p>div-style:</p>
		<p><input id="contorller_layoutdiv_style" class="easyui-textbox" size="15" data-options="multiline:true" style="width:200px;"
			value='{"width":"700px"}'/></p>
		<p>
		<button id="applyLayoutCSSBtn" >应用效果</button>
		</p>
		
    </div>
    
    <h3><a href="#">绑定数据</a></h3>
    <div id="columnname_datadiv">
      <ul>
        <li class="ui-state-default" column_name="name" column_name_show="姓名" > name(姓名)</li>
        <li class="ui-state-default" column_name="age" column_name_show="年龄" > age(年龄)</li>
        <li class="ui-state-default" column_name="sex" column_name_show="性别" > sex(性别)</li>
        <li class="ui-state-default" column_name="birthday" column_name_show="生日" > birthday(生日)</li>
      </ul>
    </div>
	
    <h3><a href="#">生成样式</a></h3>
    <div>
		<p><input id="controller_final_style" class="easyui-textbox" size="15" data-options="multiline:true" style="width:220px;height:300px;"
			value=''/></p>
		<p>
			<button id="genSystemStyleBtn" >生成样式</button>
			<button id="submit" >保存提交</button>
		</p>
		
    </div>
    
  </div>
</div>
 
 
 
 
 
<div id="cart">
  <h3 class="ui-widget-header">布局区</h3>
  <div class="ui-widget-content">
    <ol class="connectedSortable">
      <li class="placeholder">添加控件来这里</li>
      <!--<li style="clear:both;"></li>-->
    </ol>
    <div style="clear:both;"></div>
  </div>
</div>


	

 
</body>
</html>